<template>
  <a-card :bordered="false">
    <a-form-model ref="form" :model="model" :rules="validatorRules">
          <a-form-model-item :labelCol="labelCol"  :wrapperCol="wrapperCol"  label="机构名称" prop="departName" >
            <a-input placeholder="请输入寺院名称" v-model="model.departName"/>
          </a-form-model-item>
          <a-form-model-item  :labelCol="labelCol" :wrapperCol="wrapperCol" label="机构编码" prop="orgCode">
            <a-input disabled placeholder="请输入机构编码" v-model="model.orgCode"/>
          </a-form-model-item>

          <a-form-model-item :labelCol="labelCol"  :wrapperCol="wrapperCol" label="手机号" prop="mobile">
            <a-input placeholder="请输入手机号" v-model="model.mobile"/>
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol"  :wrapperCol="wrapperCol"  label="地址"  prop="address">
            <a-input placeholder="请输入地址" v-model="model.address"/>
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol"  label="GPS地理经度"  prop="longitude">
            <a-input placeholder="请输入经度" v-model="model.longitude"/>
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol"  label="GPS地理纬度"  prop="latitude">
            <a-input placeholder="请输入纬度" v-model="model.latitude"/>
            <a href="https://api.map.baidu.com/lbsapi/getpoint/index.html" target="_blank">百度GPS坐标拾取工具</a>
          </a-form-model-item>
          <a-form-model-item align="center">
              <!--<a-button @click="emptyCurrForm" type="default" htmlType="button" icon="sync">重置</a-button>-->
              <a-button @click="submitCurrForm" type="primary" htmlType="button" icon="form">保存</a-button>
          </a-form-model-item>
    </a-form-model>

  </a-card>
</template>
<script>
  import { httpAction, getAction } from '@/api/manage'
  import AAnchorLink from 'ant-design-vue/es/anchor/AnchorLink'
  export default {
    name: 'TempleBaseInfoForm',
    components: { AAnchorLink },
    data(){
      return{
        model: {},
        validatorRules: {
          departName: [{required: true, message: '请输入寺庙名称!'}],
          orgCode: [{required: true, message: '请输入机构编码!'}],
          mobile: [{required: true, message: '请输入联系电话!'},{validator: this.validateMobile}],
          address:[{required: true, message: '请输入地址!'}],
          longitude:[{required: true, message: '请输入GPS地理经度!'},
          ],
          latitude:[{required: true, message: '请输入GPS地理纬度!'},
          ]
        },
        labelCol: {
          xs: {span: 24},
          sm: {span: 5}
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16}
        },
        url: {
          delete: '/sys/sysDepart/delete',
          edit: '/sys/sysDepart/edit',
          get:'/sys/sysDepart/getMyDepart',
          deleteBatch: '/sys/sysDepart/deleteBatch',
          exportXlsUrl: "sys/sysDepart/exportXls",
          importExcelUrl: "sys/sysDepart/importExcel",
        }
      }
    },
    created(){
      httpAction(this.url.get, null, 'get').then((res) => {
        if (res.success) {
          this.model = res.result
        } else {
          this.$message.error(res.message)
        }
      })
    },
    methods:{
      submitCurrForm() {
        this.$refs.form.validate((ok, err) => {
          if (ok) {
            let formData = this.model
            httpAction(this.url.edit, formData, 'put').then((res) => {
              if (res.success) {
                this.$message.success('保存成功!')
              } else {
                this.$message.error(res.message)
              }
            })
          }
        })
      },
      emptyCurrForm() {
        this.model = {}
      },
      // 验证手机号
      validateMobile(rule,value,callback){
        if (value &&
          (new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value) ||
          new RegExp(/^\d{3}-\d{7,8}|\d{4}-\d{7,8}$/).test(value))
        ){
            callback();
        }else{
          callback("手机号格式或者固定电话格式不正确!");
        }
      }
    }

  }

</script>

<style scoped>

</style>